<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/modules/css/search.css" media="all">
    <script src="/components/layuiadmin/layui/src/layui.js"></script>
    <script src='/base/js/jquery-3.4.1.min.js'></script>
    <script src="/modules/js/app.js"></script>
</head>
<body>
<!-- 搜索 -->
<div class="searchTable">
    ID搜索：
    <div class="layui-inline">
        <input class="layui-input" id="id" name="id" placeholder="请输入ID搜索" autocomplete="off">
    </div>
    账号：
    <div class="layui-inline">
        <input class="layui-input" id="username" name="username" placeholder="请输入账号搜索" autocomplete="off">
    </div>
    用户名：
    <div class="layui-inline">
        <input class="layui-input" id="fullName" name="fullName" placeholder="请输入昵称搜索" autocomplete="off">
    </div>
    <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button>
</div>
<!-- 表格 -->
<table class="auth-table" id="auth-table" lay-filter="auth-table"></table>
<!-- 分页插件 -->
<div class="page-table" id="page-table"></div>
<!-- 多删除添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>


</script>
<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <!--  <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="roleEdit">角色管理</a> -->
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="resetPassword">重置密码</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    //接口
    let user_admin_find_page = path + "/admin/adminUser/findPage";              // 用户查询
    let user_admin_update = path + "/admin/adminUser/upd";                   // 用户编辑
    let user_admin_delete = path + "/admin/adminUser/del";                   // 用户删除
    let user_admin_deletes = path + "/admin/adminUser/delByIds";             // 批量删除
    let user_admin_upd_reset_pws = path + "/admin/adminUser/updResetPassword";  // 重置密码

    //路由
    let user_admin_page_upd = "/page/modules_sys_admin_user_userUpd";          // 用户编辑弹出
    let user_admin_page_add = "/page/modules_sys_admin_user_userAdd";          // 用户添加弹出
    let user_admin_page_upd_role = "/page/modules_sys_admin_user_updRole";     // 用户角色分配弹出


    let res;       // 完整的后台数据
    var data;      // 当前行数据（弹出层时可直接parent.data获取）

    layui.use(['form', 'table', 'laypage'], function () {
        xijiaRenderTable();   // 数据表格 - 获取表格
        xijiaLayPage();           // 分页插件
        xijiaEventToolbar();      // 工具栏事件（多删除/添加）
        xijiaEventTool();         // 监听数据表格内按钮操作（编辑,删除等）
        xijiaEventSearch();       // 监听条件搜索
        xijiaEventSwitch();       // 监听单选
    });

    /**
     *  重载表格和加载表格
     * ---- getPage()= 获取 layui 当前分页参数 ===> 如：?current=1&size=10
     * ---- res = 后台返回的整个数据，整个页面可获取使用
     * @param params get请求的参数拼接
     */
    function xijiaRenderTable() {
        res = Ajax.get(user_admin_find_page + getPage() + xijiaSearchParam());
        layui.table.render({
            elem: '#auth-table'
            //, url: findAll
            , data: res.data.records
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , sort: true
            , limit: res.data.size //显示的数量
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    //, {field: 'id', title: 'ID', width: 80, fixed: 'left'}
                    , {
                    field: 'head', title: '头像', width: 70, templet: function (res) {
                        return "<img src='" + res.head + "'  style='border-radius: 30px;width: 30px;height: 30px;'>";
                    }
                }
                    , {field: 'username', title: '账号', width: 120,}
                    , {field: 'phone', title: '手机号', width: 120,}
                    , {field: 'fullName', title: '姓名/用户名'}
                    , {field: 'age', title: '年龄', sort: true}
                    ,
                    {
                        field: 'gender', title: '性别', templet: function (res) {
                            return Dict.convert(Enums.Base.Gender, res.gender);
                        }
                    },
                    {field: 'address', title: '地址'},
                    {
                        field: 'disable', width: 120, title: '禁用/启用', templet: function (res) {
                            if (res.disable == 0) {
                                return "   <input type='checkbox'  id = '" + res.id + "' lay-filter='disable' lay-skin='switch' lay-text='启用|禁用' checked>"
                            } else if (res.disable == 1) {
                                return "   <input type='checkbox'  id = '" + res.id + "' lay-filter='disable' lay-skin='switch' lay-text='启用|禁用'>"
                            }
                        }
                    },
                    {field: 'regTime', title: '注册时间', width: 165}
                    , {field: 'endTime', title: '最后登录时间', width: 165}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 330}
                ]
            ]
        });
    }


    /**
     * 分页配置, 数据总数会在下一次点击事更新上一次数据库的总数量
     * @author ws
     * @mail  1720696548@qq.com
     * @param result 后台返回数据, 用于第一此加载总数据
     * @date  2020/4/22 0022 1:18
     * @return
     */
    function xijiaLayPage() {
        layui.laypage.render({
            // 注意，这里的 page-table 是 ID，不用加 # 号
            elem: 'page-table'
            , count: res.data.total    // 数据总数，从服务端得到
            , limit: res.data.size     // 每页数量
            // 基础信息配置
            , layout: pageJson.layout
            , curr: pageJson.curr
            , limits: pageJson.limits
            , groups: pageJson.groups
            , prev: pageJson.prev
            , next: pageJson.next
            // 监听 obj包含了当前分页的所有参数， 比如： obj.curr =当前页, obj.limit = 每页显示条数
            , jump: function (obj, first) {
                //首次不执行, 第一次加载时 first=true
                if (first) {
                    return;
                }
                // 刷新表格
                xijiaRenderTable();
            }
        });
    }

    /**
     *   工具栏事件（多删除 || 添加）  ==>> toolbar(auth-table): toolbar=监听表格头事件,  auth-table=数据表格elem 名称
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventToolbar() {
        layui.table.on('toolbar(auth-table)', function (obj) {
            //   添加
            if (obj.event === "add") {
                Pop.tipsWindown(user_admin_page_add, "800px", "560px", "用户添加");
            }
            //   多删除
            if (obj.event === "del") {
                let ids = [];
                // 获取所有选中行
                let checkStatus = table.checkStatus(obj.config.id);
                // 获取行数据
                let data = checkStatus.data;
                for (let i = 0; i < data.length; i++) {
                    ids[i] = data[i].id;
                }
                if (ids.length > 0) {
                    let result = Ajax.delete(user_admin_deletes + "?ids=" + ids);
                    xijiaRenderTable();
                    layer.msg(result.msg);
                }

            }
        });
    }


    /**
     *   监听数据表格内按钮（编辑 || 删除 || 其他）, tool(auth-table)==> tool =监听按钮， auth-table=数据表格elem对应值
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventTool() {
        layui.table.on('tool(auth-table)', function (obj) {
            data = obj.data;  //当前行数据
            //   角色分配
            if (obj.event === 'roleEdit') {
                Pop.tipsWindown(user_admin_page_upd_role, "800px", "560px", "角色分配");
            }
            //   用户编辑
            if (obj.event === 'edit') {
                Pop.tipsWindown(user_admin_page_upd, "800px", "560px", "用户编辑");
            }
            //   单行删除
            if (obj.event === 'del') {
                let params = "?id=" + data.id;
                Pop.tipsDeleteId(user_admin_delete + params, obj);
            }
            //   重置密码
            if (obj.event === 'resetPassword') {
                //例子2 //输入框类型，支持0（文本）默认1（密码）2（多行文本）
                layer.prompt({
                    formType: 0,
                    value: '123456',
                    title: '重置密码',
                    area: ['300px', '200px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    let params = "?id=" + data.id;
                    params += "&password=" + value;
                    let result = Ajax.put(user_admin_upd_reset_pws + params);
                    layer.msg(result.msg);
                    layer.close(index);
                });
            }
        });
    }


    /**
     *   条件搜索，重载数据
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventSearch() {
        let $ = layui.$, active = {
            //搜索
            reload: function () {
                // 重置到第一页
                $(".layui-laypage-skip .layui-input").val(1);
                // 数据表格 - 获取表格
                xijiaRenderTable();
                // 刷新分页插件数据
                xijiaLayPage();
            }
        };
        // 搜索事件
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }


    /**
     * 搜索参数
     * @author wangsong
     * @date 2020/8/23 0023 22:53
     * @return
     * @version 1.0.0
     */
    function xijiaSearchParam() {
        let params = "";
        params += "&id=" + $("#id").val();
        params += "&username=" + $("#username").val();
        params += "&fullName=" + $("#fullName").val();
        return params;
    }

    /**
     *  监听单选选中
     * <p>
     * switch(state) 对应 lay-filter='state'
     */
    function xijiaEventSwitch() {
        layui.form.on('switch(disable)', function (data) {
            let disable = 0;
            if (data.elem.checked) {
                disable = 0;
            } else {
                disable = 1;
            }
            let reqData = {
                id: data.elem.attributes['id'].nodeValue,
                disable: disable
            };
            let result = Ajax.put(user_admin_update, reqData);
            layer.msg(result.msg)
        });
    }
</script>
</body>
</html>